﻿<?php  //  jquery  的实例     


//自动加载
$(function(){
    //这里是可以自动加载的
})

//////////////////////////////      下拉菜单    //////////////////////////////////////////
//整体的外面加ul会使两个大菜单距离正常 
一。1：主菜单与从菜单是左对齐的状态。自动类型的。
<style>.u li{display:none;}</style>
<ul>
    <ul class="u">菜单二
            <li>一级菜单</li>
            <li>一级菜单</li>
          <li>一级菜单</li>
    </ul>
    <ul class="u">菜单二
            <li>一级菜单</li>
            <li>一级菜单</li>
          <li>一级菜单</li>
    </ul>
</ul>   
<script>
$('.u').hover(function(){
    $(this).children().stop().slideToggle(300);
},function(){
    $(this).children().stop().slideToggle(300);
}); 
</script>

一。2：主菜单与从菜单有级别感，两个写法一样就是加了一层 ul 自动类型的。
<style>.u{display:none;} </style>
<ul>
    <ul class="xl">菜单一
        <ul class="u">
                    <li>一级菜单</li>
                    <li>一级菜单</li>
                  <li>一级菜单</li>
        </ul>
    </ul>
    <ul class="xl">菜单二
        <ul class="u">
                    <li>一级菜单</li>
                    <li>一级菜单</li>
                  <li>一级菜单</li>
        </ul>
    </ul>
</ul>
<script type="text/javascript">
$('.xl').hover(function(){
    $(this).children().stop().slideToggle(300);
},function(){
    $(this).children().stop().slideToggle(300);
});
 </script> 

二。1：主菜单与从菜单是左对齐的状态。点击类型的。
<style type="text/css">
.u li{display:none;}
li{list-style:none;}
</style>
<ul>
        <ul class="u">菜单一
                    <li>一级菜单</li>
                    <li>一级菜单</li>
                  <li>一级菜单</li>
        </ul>
        <ul class="u">菜单二
                    <li>一级菜单</li>
                    <li>一级菜单</li>
                  <li>一级菜单</li>
        </ul>
</ul>
<script>
    $('.u').click(function(){
        $(this).children().stop().slideToggle(300);
    });
</script>

二。2：主菜单与从菜单有级别感，两个写法一样就是加了一层 ul 点击类型的。
<style type="text/css">
.u{display:none;}
li{list-style:none;}
</style>
<ul>
    <ul class="xl">菜单一
        <ul class="u">
                    <li>一级菜单</li>
                    <li>一级菜单</li>
                  <li>一级菜单</li>
        </ul>
    </ul>
    <ul class="xl">菜单二
        <ul class="u">
                    <li>一级菜单</li>
                    <li>一级菜单</li>
                  <li>一级菜单</li>
        </ul>
    </ul>
</ul>
<script>
    $('.xl').click(function(){
        $(this).children().stop().slideToggle(300);
    });
</script>


//////////////////////////////////////    选项卡     ///////////////////////////////////////////////
<style>
    .none{display:none;}
    .tab_menu{width:300px;height:30px;border:1px solid red;}
    .div{width:60px;height:30px;float:left;margin-right:10px;cursor:pointer;background:lightgreen;line-height:30px;}
    .tab_box , .tab_box>div{width:300px;height:300px;border:1px solid lightblue;}
    .sel{background:red;}
</style>
<div>
    <div class="tab_menu">
        <div class="div">菜单一</div>
        <div class="div">菜单二</div>
        <div class="div">菜单三</div>
    </div>
    <div class="tab_box">
        <div>111111111111111111111111</div>
        <div class="none">222222222222222222222222</div>
        <div class="none">333333333333333333333333</div>
    </div>
</div>
<script>
$('.tab_menu').children().mouseover(function(){
    $(this).addClass('sel').siblings().removeClass('sel');  //改变颜色
    var id = $(this).index();   //当前操作的元素索引值
    $('.tab_box').children().eq(id).show().siblings().hide();   //当前显示，其他的隐藏。
});
</script>
////////////////////////////////    轮换板的简单实现    /////////////////////////////////////////////////////

<style>
    *{margin:0px;padding:0px;}
    .none{display:none;}
</style>
<span class="tu">
    <a><img src="./01.jpg" alt=""></a>
    <a class="none"><img src="./02.jpg" alt=""></a>
    <a class="none"><img src="./03.jpg" alt=""></a>
    <a class="none"><img src="./04.jpg" alt=""></a>
    <a class="none"><img src="./05.jpg" alt=""></a>
    <a class="none"><img src="./06.jpg" alt=""></a>
    <a class="none"><img src="./07.jpg" alt=""></a>
</span>
<script>
var length = $('.tu').children().length-1;  //length从1开始。而eq从0开始。都定义为0开始。
var img = 0;    
setInterval(function(){
    id = img++; 
    $('.tu').children().eq(id).show().siblings().hide();
    if(id == length){
         img = 0;
    }
},1500);
</script>

/////////////////////////////////////////////////////////////////////////////////////

/////////////////////////////////////////////////////////////////////////////////////

/////////////////////////////////////////////////////////////////////////////////////

/////////////////////////////////////////////////////////////////////////////////////

/////////////////////////////////////////////////////////////////////////////////////

/////////////////////////////////////////////////////////////////////////////////////

/////////////////////////////////////////////////////////////////////////////////////
定时器
        setInterval（表达式,毫秒数）        周期执行
        clearInterval（）                     取消 setInterval() 设置

        setTimeout（表达式,毫秒数）     执行一次
        clearTimeout（）                  取消 setTimeout() 设置

     offset   offsetLeft  offsetTop   offsetHeight  offsetWidth
   client   clientLeft  clientTop   clientHeight  clientWidth
     scroll   scrollLeft  scrollTop   scrollHeight  scrollWidth

//div框的移动。
$("#div").mousedown(function(event){   
    var offset=$(this).offset();   
    x1=event.clientX-offset.left;   
    y1=event.clientY-offset.top;
    $(this).css('cursor','move');
    $(this).mousemove(function(event){   
       $(this).css("left",(event.clientX-x1)+"px");   
        $(this).css("top",(event.clientY-y1)+"px");   
    });
    $(this).mouseup(function(event){ 
        $(this).unbind("mousemove").css('cursor','');   
    });   
}); 

//浮动在右下角。
#d {width:150px;height:150px;position:absolute;right:0;bottom:0;border:1px solid red;}
<div id="v">浮动在右下角的框</div>
var Divtop1 = $("#v").offset().top;
$(window).scroll(function(){
    var Divtop2 = Divtop1 + $(window).scrollTop() +"px";
    $("#v").animate({top:Divtop2 },{duration:400,queue:false});
    });
});


网页可见区域宽： document.body.clientWidth
网页可见区域高： document.body.clientHeight
网页可见区域宽： document.body.offsetWidth (包括边线的宽)
网页可见区域高： document.body.offsetHeight (包括边线的高)
网页正文全文宽： document.body.scrollWidth
网页正文全文高： document.body.scrollHeight
网页被卷去的高： document.body.scrollTop
网页被卷去的左： document.body.scrollLeft
网页正文部分上： window.screenTop
网页正文部分左： window.screenLeft
屏幕分辨率的高： window.screen.height
屏幕分辨率的宽： window.screen.width
屏幕可用工作区高度： window.screen.availHeight
屏幕可用工作区宽度： window.screen.availWidth

$(window).height(); //浏览器当前窗口可视区域高度 
$(document).height(); //浏览器当前窗口文档的高度 
$(document.body).height();//浏览器当前窗口文档body的高度 
$(document.body).outerHeight(true);//浏览器当前窗口文档body的总高度 包括border padding  
$(window).width(); //浏览器当前窗口可视区域宽度 
$(document).width();//浏览器当前窗口文档对象宽度 
$(document.body).width();//浏览器当前窗口文档body的高度 
$(document.body).outerWidth(true);//浏览器当前窗口文档body的总宽度 包括border padding margin
*/
</script>